import { Button, Modal, Table } from 'antd';
import { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import { useRequest } from 'umi';
import { DeployService } from '../../service'
import { useHistory } from 'dva'
import { Pod } from '../../vms';

interface Props {
  open: boolean
  deploy_name: string
  namespace: string
  onCancel?: () => void
}

function Pods(props: Props) {
  const { open, deploy_name, namespace, onCancel } = props
  const router = useHistory()

  const [Pods, setPods] = useState<Pod[]>();

  const list = useRequest(DeployService.listPod, {
    manual: true,
    onSuccess: (data) => {
      setPods(data.pods.items)
    }
  })

  const columns: ColumnsType<Pod> = [
    {
      title: 'pod名称',
      dataIndex: 'pod_name',
      key: 'pod_name',
      render: (_, { metadata }) => metadata.name
    },
    {
      title: 'PodIP',
      dataIndex: 'podIP',
      key: 'podIP',
      render: (_, { status }) => status.podIP
    },
    {
      title: 'StartTime',
      dataIndex: 'startTime',
      key: 'startTime',
      render: (_, { status }) => status.startTime
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (_, { status }) => status.phase
    },

    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <div style={{ display: 'flex' }}>
          <a
            style={{
              display: 'block',
              overflow: 'hidden',
            }}
            target="_blank"
            rel="noopener noreferrer"
            href={`/pod?pod=${record.metadata.name}&namespace=${record.metadata.namespace}&command=sh`}
          >
            sh
          </a>
          <a
            style={{
              display: 'block',
              overflow: 'hidden',
              marginLeft: '10px'
            }}
            target="_blank"
            rel="noopener noreferrer"
            href={`/pod?pod=${record.metadata.name}&namespace=${record.metadata.namespace}&command=bash`}
          >
            bash
          </a>

        </div>
      ),
    },
  ];

  useEffect(() => {
    if (open) {
      list.run({ namespace, deploy_name })
    }
  }, [open, deploy_name, namespace])

  return (
    <Modal title="Pods" width={1200} open={open} onCancel={onCancel} footer={null}>
      <Table
        rowKey={(record) => JSON.stringify(record)}
        columns={columns}
        loading={list.loading}
        dataSource={Pods}
        pagination={{
          total: Pods?.length,
          pageSize: 20,
        }}
        style={{ minHeight: 300 }}
      />
    </Modal>
  )
}

export default Pods
export { Pods, Props }
